<template>
    <div>
      <div class="card" style="margin-bottom: 5px;">
        <el-button v-for="item in data.categoryList" :key="item.id">{{item.name}}</el-button>
      </div>
      <div class="card" style="margin-bottom: 10px;">
        <el-input v-model="data.name" style="width: 300px; margin-right: 10px" placeholder="请输入商品名称查询"></el-input>
        <el-button type="primary" @click="load">查询</el-button>
        <el-button type="info" style="margin: 0 10px" @click="reset">重置</el-button>
      </div>

        <el-row :gutter="10">
          <el-col :span="6" v-for="item in data.goodsList" :key="item.id">
            <div class="card" >
              <img :src="item.img" alt=""  style="height: 100%; width: 340px" >
              <div style="font-size: 18px; margin: 5px 0; color: #333">{{item.name}}</div>
              <el-tooltip v-if="item.descr.length > 20" :content="item.descr" effect="light" placement="top">
                <div class="line2" style="margin: 5px 0; color: #333; font-size: 14px; height: 40px">{{item.descr}}</div>
              </el-tooltip>
              <div v-else class="line2" style="margin: 5px 0; color: #1450aa; font-size: 14px">{{item.descr}}</div>
            </div>
          </el-col>
        </el-row>
    </div>

</template>

<script setup>
import request from "@/utils/request";
import {reactive} from "vue";
import {ElMessageBox, ElMessage} from "element-plus";



const data = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 0,
  name: '',
  goodsList: [],
  categoryList: []
})


//获取到分类的数据
request.get('/category/selectAll').then(res =>{
  data.categoryList = res.data
})


// 分页查询
const load = () => {
  request.get('/goods/selectPage', {
    params: {
      pageNum: data.pageNum,
      pageSize: data.pageSize,
      name: data.name
    }
  }).then(res => {
    data.goodsList = res.data?.list
    data.total = res.data?.total
  })
}


load()
</script>